<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">table-stripe</view>
			<view class="tui-page__desc">带斑马纹表格</view>
		</view>
		<tui-table border-right>
			<tui-tr>
				<tui-td padding="20rpx 8rpx" border-width="0" bold v-for="(item,index) in header" :key="index" :span="8">{{item.title}}</tui-td>
			</tui-tr>
			<tui-tr :backgroundColor="index%2!=0?'#FAFAFA':'#fff'" v-for="(item, index) in listData" :key="index">
				<tui-td padding="20rpx 8rpx" border-width="0" backgroundColor="transparent" :span="8" v-for="(obj, idx) in header"
				 :key="idx">{{item[obj.key]}}</tui-td>
			</tui-tr>
		</tui-table>
		<view class="tui-section__title">无表头/无边框/居中</view>
		<tui-tr border-width="0" :backgroundColor="index%2!=0?'#FFF5E6':'#EEF9EC'" v-for="(item, index) in listData" :key="index">
			<tui-td alignItems="center" textAlign="center" padding="20rpx 8rpx" border-width="0" backgroundColor="transparent"
			 :span="8" v-for="(obj, idx) in header" :key="idx">{{item[obj.key]}}</tui-td>
		</tui-tr>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				header: [{
						title: '姓名',
						key: 'name'
					},
					{
						title: '日期',
						key: 'date'
					},
					{
						title: '地址',
						key: 'address'
					}
				],
				listData: [{
						id: 1,
						name: '张三',
						date: '2020-05-02',
						address: '上海市普陀区'
					},
					{
						id: 2,
						name: '李四',
						date: '2020-05-02',
						address: '上海市普陀区金沙江路 56 弄'
					},
					{
						id: 3,
						name: '王小虎',
						date: '2020-05-02',
						address: '上海市普陀区金沙江路'
					},
					{
						id: 4,
						name: '王小虎',
						date: '2020-05-02',
						address: '上海市普陀区金沙江路'
					},
					{
						id: 5,
						name: '王小虎',
						date: '2020-05-02',
						address: '上海市普陀区金沙江路'
					}
				]
			}
		},
		methods: {

		}
	}
</script>

<style>
	.container {
		padding-bottom: 120rpx;
	}
</style>
